<template>
  <div class="information-panel">
    <!--<h2 class="title">-->
      <!--<span>{{$t('public.customerInfo')}}</span>-->
    <!--</h2>-->
    <BaseInformationOne
            v-show="custType === 'one'"
            :currentBusinessObj="currentBusinessObj"
            :customer="customer"
            @openAddCustomerSubPanel="openAddCustomerSubPanel"
            @openContactPlanSubPanel="openContactPlanSubPanel"/>
    <BaseInformationUnk v-show="custType === 'unk'" :currentBusinessObj="currentBusinessObj" :customer="customer" @openAddCustomerSubPanel="openAddCustomerSubPanel" />
    <AddCustomerSubPanel
      ref="addCustomer"
      :currentBusinessObj="currentBusinessObj"
      :customer="customer"
      :webchatData="webchatData"
      @subPanelOpen="$emit('subPanelOpen')"
      @subPanelClose="$emit('subPanelClose')"
    />
    <ContactPlanSubPanel
      ref="contactPlan"
      :customer="customer"
      @subPanelOpen="$emit('subPanelOpen')"
      @subPanelClose="$emit('subPanelClose')"
    />
  </div>
</template>

<script>
import { isEmpty } from 'lodash'

import BaseInformationOne from './BaseInformationOne.vue'
import BaseInformationUnk from './BaseInformationUnk.vue'
import ContactPlanSubPanel from './sub-panel/ContactPlanSubPanel.vue'
import AddCustomerSubPanel from './sub-panel/AddCustomerSubPanel.vue'

export default {
  name: 'BaseInformation',
  components: {
    BaseInformationOne,
    BaseInformationUnk,
    ContactPlanSubPanel,
    AddCustomerSubPanel
  },
  props: {
    customer: {
      type: Object,
      default: function () {
        return {}
      }
    },
    currentBusinessObj: Object,
    webchatData: Object
  },
  computed: {
    path () {
      return this.$route.path.split('/')
    },
    type () {
      return this.path[2] || ''
    },
    tabType () {
      return this.path[3] || ''
    },
    custType () {
      let currCustomer = null
      if (this.type === 'webchat') {
        if (this.tabType === 'webchat_todo' || this.tabType === 'webchat_all' || this.tabType === 'webchat_robot' || this.tabType === 'webchat_laterProcess' || this.tabType === 'webchat_queue') {
          currCustomer = this.$store.state.webchat.current[this.tabType].currentCustomer
        }
      }
      let noCustomer = isEmpty(currCustomer)
      return noCustomer ? 'unk' : 'one'
    }
  },
  methods: {
    openAddCustomerSubPanel () {
      this.$refs.addCustomer.open()
    },
    openContactPlanSubPanel () {
      this.$refs.contactPlan.open()
    }
  }
}
</script>

<style lang="stylus" scoped>
  .information-panel
    padding-top 0px
    padding-left 20px
    padding-right 20px
    // .title
    //   font-size 14px
    //   font-weight 600
    //   color #595959
    //   cursor pointer
</style>
